<template>
  <div class="card-container">
    <div class="more-info-box">
      <el-row class="more-info-row">
        <el-col :span="16"><el-text>工号: {{ userData.employeeId }} </el-text></el-col>
        <el-col :span="8"><el-text>所属学院: {{ userData.department }}</el-text></el-col>
      </el-row>
      <el-row class="more-info-row">
        <el-col :span="16"><el-text>负责班级: {{ userData.className }}</el-text></el-col>
        <el-col :span="8"><el-text>职级: {{ userData.title }}</el-text></el-col>
      </el-row>
      <el-row class="more-info-row">
        <el-col :span="16"><el-text>电话号码: {{ userData.phone }}</el-text></el-col>
        <el-col :span="8"><el-text>办公室: {{ userData.officeAddress }}</el-text></el-col>
      </el-row>
      <el-row class="more-info-row">
        <el-col :span="16"><el-text>入职日期: {{ userData.hireDate }}</el-text></el-col>
        <el-col :span="8"><el-text>工作经验: {{ userData.workExperience }}</el-text></el-col>
      </el-row>
    </div>
    <!--    <el-button circle  @click="startSetting()" >-->
    <!--      <el-icon style="vertical-align: middle">-->
    <!--        <Setting />-->
    <!--      </el-icon>-->
    <!--    </el-button>-->
  </div>
</template>

<script setup>
import {defineProps, onMounted, reactive, ref} from 'vue';
import {Setting} from "@element-plus/icons-vue";

const props = defineProps({
  userData:{
    employeeId: 1,
    userid: "user005",
    className: "大一计算机班",
    department: "计算机科学与技术学院",
    phone: "13812345678",
    officeAddress: "理科楼3号楼202室",
    workExperience: "5年教学经验",
    title: "教授",
    hireDate: "2020-08-31T16:00:00.000+00:00",
    name: "孙七",
    gender: "男",
    role: 2
  }
})
</script>

<style scoped>
.card-container{
  width: 100%;
  height: 50vh;
}
.more-info-box{
  width: 100%;
  margin-left: 6%;
  margin-right: 6%;
}
.more-info-row{
  width: 100%;
  margin-top: 20px;
  font-size: 30px;
  font-weight: bold;
}
</style>
